<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>药库管理</el-breadcrumb-item>
      <el-breadcrumb-item>药库库存</el-breadcrumb-item>
      <el-breadcrumb-item>药库列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图-->
    <el-card>
      <!--搜索区域-->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="input"
            placeholder="请输入药品名称"
            style="width: 100%"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true"
            >添加</el-button
          >
        </el-col>
      </el-row>

      <!--药品列表区-->
      <el-table
        :data="StoragedanList"
        border
        style="margin-top: 15px; font-size: 12px"
      >
        <el-table-column type="index"></el-table-column>
        <el-table-column label="药名" prop="Dan_name"></el-table-column>
        <el-table-column
          label="价格"
          prop="Dan_price"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="说明书"
          prop="Dan_explain"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="类型" prop="Dan_type"></el-table-column>
        <el-table-column
          label="用法用量"
          prop="Dan_dosage"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="使用方式"
          prop="Dan_way"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="规格" prop="Dan_specifications">
        </el-table-column>
        <el-table-column label="保质期(月)" prop="Dan_quality">
        </el-table-column>
        <el-table-column
          label="生产时间"
          prop="Dan_manufacture"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="单位" prop="Dan_company"></el-table-column>
        <el-table-column
          label="有效期"
          prop="Dan_Effective"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="生产公司"
          prop="Dan_manufactor"
        ></el-table-column>
        <el-table-column
          label="库存数量"
          prop="Dan_storageNumber"
        ></el-table-column>
        <el-table-column label="操作" width="160px">
          <template>
            <el-tooltip effect="dark" content="修改" placement="top">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 15px"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="添加药品信息"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!--内容主题区域-->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
      >
        <el-form-item label="药名" prop="Dan_name">
          <el-input v-model="addForm.Dan_name"></el-input>
        </el-form-item>
        <el-form-item
          label="价格"
          prop="Dan_price"
          style="position: absolute; left: 50%; top: 14%; width: 100%"
        >
          <el-input v-model="addForm.Dan_price"></el-input>
        </el-form-item>
        <el-form-item label="说明书" prop="Dan_explain">
          <el-input v-model="addForm.Dan_explain"></el-input>
        </el-form-item>
        <el-form-item
          label="类型"
          :label-width="formLabelWidth"
          prop="Dan_type"
          style="position: absolute; left: 50%; top: 24%; width: 39%"
        >
          <el-select v-model="addForm.Dan_type" placeholder="请选择药品类型">
            <el-option label="中药" value="1"></el-option>
            <el-option label="西药" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用法用量" prop="Dan_dosage">
          <el-input v-model="addForm.Dan_dosage"></el-input>
        </el-form-item>
        <el-form-item
          label="使用方式"
          :label-width="formLabelWidth"
          prop="Dan_way"
          style="position: absolute; left: 50%; top: 34%; width: 39%"
        >
          <el-select v-model="addForm.Dan_way" placeholder="请选择使用方式">
            <el-option label="口服" value="1"></el-option>
            <el-option label="外敷" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="规格" prop="Dan_specifications">
          <el-input v-model="addForm.Dan_specifications"></el-input>
        </el-form-item>
        <el-form-item
          label="保质期(月)"
          prop="Dan_quality"
          style="position: absolute; left: 50%; top: 44%; width: 100%"
        >
          <el-input v-model="addForm.Dan_quality"></el-input>
        </el-form-item>

        <el-form-item
          label="生产时间"
          prop="Dan_manufacture"
          style="width: 117%"
        >
          <el-col :span="20">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addForm.Dan_manufacture"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item
          label="单位"
          prop="Dan_company"
          style="position: absolute; left: 50%; top: 54%; width: 40%"
        >
          <el-select v-model="addForm.Dan_company" placeholder="请选择使用单位">
            <el-option label="盒" value="1"></el-option>
            <el-option label="瓶" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" prop="Dan_Effective">
          <el-col :span="7">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addForm.Dan_Effective"
              style="width: 103%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item
          label="生产公司"
          prop="Dan_manufactor"
          style="position: absolute; left: 50%; top: 64%; width: 100%"
        >
          <el-input v-model="addForm.Dan_manufactor"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" prop="Dan_storageNumber">
          <el-input v-model="addForm.Dan_storageNumber"></el-input>
        </el-form-item>
      </el-form>
      <!--主题区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStoragedanList">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      total: 0,
      // 控制Dialog的显示与隐藏
      addDialogVisible: false,
      queryInfo: {
        quary: "",
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2,
      },
      // 添加药品的表单数据
      addForm: {
        Dan_name: "",
        Dan_price: "",
        Dan_explain: "",
        Dan_type: "",
        Dan_dosage: "",
        Dan_way: "",
        Dan_specifications: "",
        Dan_quality: "",
        Dan_manufacture: "",
        Dan_company: "",
        Dan_Effective: "",
        Dan_manufactor: "",
        Dan_storageNumber: "",
      },
            // 添加表单的验证规则对象
      addFormRules: {
        Dan_name: [
          { required: true, message: "请输入药名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 10 个字符", trigger: "blur" },
        ],
        Dan_price: [
          { required: true, message: "请输入价格", trigger: "blur" },
        ],
        Dan_explain: [
          { required: true, message: "请输入说明书", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
        ],
        Dan_type: [
          { required: true, message: "请选择药品类型", trigger: "blur" },
        ],
        Dan_dosage: [
          { required: true, message: "请输入用法用量", trigger: "blur" },
        ],
        Dan_way: [
          { required: true, message: "请选择使用方式", trigger: "blur" },
        ],
         Dan_specifications: [
          { required: true, message: "请选择规格", trigger: "blur" },
        ],
         Dan_quality: [
          { required: true, message: "请输入保质期", trigger: "blur" },
        ],
         Dan_manufacture: [
          { required: true, message: "请选择生产时间", trigger: "blur" },
        ],
        Dan_company: [
          { required: true, message: "请选择单位", trigger: "blur" },
        ],
        Dan_Effective: [
          { required: true, message: "请选择有效期", trigger: "blur" },
        ],
        Dan_manufactor: [
          { required: true, message: "请输入生产公司", trigger: "blur" },
        ],
        Dan_storageNumber: [
          { required: true, message: "请输入库存数量", trigger: "blur" },
        ],
      },
      StoragedanList: [
        {
          Dan_name: "安神丸",
          Dan_price: "12",
          Dan_explain: "治疗头晕。失眠",
          Dan_type: "西药",
          Dan_dosage: "一天一次，一次一粒",
          Dan_way: "口服",
          Dan_specifications: "10粒",
          Dan_quality: "24个月",
          Dan_manufacture: "2019-12-16 00:00:00",
          Dan_company: "盒",
          Dan_Effective: "2021-12-16 00:00:00",
          Dan_manufactor: "北京同仁",
          Dan_storageNumber: "200",
        },
      ],
    };
  },
  created() {
    this.getStoragedanList();
  },
  methods: {
    async getStoragedanList() {
      const { data: res } = await this.$http.get("Storagedan", {
        params: this.queryInfo,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("获取药库列表失败！");
      }
      this.StoragedanList = res.data.Storagedan;
      this.total = res.data.total;
      console.log(res);
    },
    // 监听添加用户对话框关闭的时间
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },

    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pagesize = newSize;
      this.getRegistrationList();
    },
    // 监听 页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pagenum = newPage;
      this.getRegistrationList();
    },
     //点击按钮添加新用户
    addStoragedanList(){
      this.$refs.addFormRef.validate(valid =>{
        if(!valid) return
        //可以发起添加用户的网络请求
        /**
         * 代码区
         */
      })
    }
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.el-input {
  width: 30%;
}
.el-form-item {
  line-height: 2em;
}
</style>